<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 100vh;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=qUKBm0MPk3yTcmCeIjz7xDjOkwoqrvKI"></script>
    <title>车辆实时位置</title>
</head>

<body>
<div id="allmap"></div>
</body>
</html>
<script th:inline="javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point([[${lng}]], [[${lat}]]);
    map.centerAndZoom(point, 19);
    map.enableScrollWheelZoom(true);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    var opts = {
        position: point,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(-60, -80)    //设置文本偏移量
    };
    var msg=[[${msg}]];
    var label = new BMap.Label(msg, opts);  // 创建文本标注对象
    label.setStyle({
        color: 'red',
        fontSize: '20px',
        lineHeight: '30px',
        fontFamily: '微软雅黑'
    });

    map.addOverlay(label);

    var myIcon = new BMap.Icon("https://maponline0.bdimg.com/sty/map_icons2x/MapRes/qiche.png", new BMap.Size(50, 48));
    var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    map.enableInertialDragging();

    map.enableContinuousZoom();

    var size = new BMap.Size(10, 10);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: size,
        // 切换城市之前事件
        // onChangeBefore: function(){
        //    alert('before');
        // },
        // 切换城市之后事件
        // onChangeAfter:function(){
        //   alert('after');
        // }
    }));
</script>